.clearfix {
    overflow: hidden;

    &::after {
        content: "\20";
        height: 1%;
        display: block;
        overflow: auto;
        clear: both;
    }
}

.login_warp {
    width: 100vw;
    height: 100vh;
    background: url('/images/loginbg.jpg') no-repeat top center;
    background-size: cover;

    .login_container {
        height: 100%;
        padding: 200px 0 0;
        background-color: rgba(0, 0, 0, .36);

        .login_pages {
            width: 400px;
            height: 500px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: rgba(0, 0, 0, .2) 0 0 2px 2px;
            padding: 30px 32px;
            &:focus-within {
                border: 1px solid skyblue;
            }
            h5 {
                height: 45px;
                border-bottom: 1px solid #ccc;
                line-height: 24px;
            }
            ul {
                width: 336px;
                margin: 45px auto 8px;
                li {
                    margin-bottom: 20px;
                    input {
                        width: 336px;
                        height: 42px;
                        padding: 0 20px;
                        color: #666666;
                        font-size: 14px;
                        border: 1px solid #dddddd;
                        background: #f4f4f4;
                        &:not([type=submit]):focus {
                            background-color: #fff;
                        }
                    }
                    &.auto_login {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        font-size: 14px;
                        label {
                            line-height: 20px;
                            input[type=checkbox] {
                                width: 14px;
                                height: 14px;
                                margin-right: 10px;
                                vertical-align: middle;
                                &:checked {
                                    &+span {
                                        color: #222;
                                    }
                                }
                            }
                        }
                        span {
                            color: #ccc;
                            &:hover {
                                color: #222;
                            }
                        }
                    }
                }
            }
        }
    }
}